<template>
	<view class="mineBox">
		<view class="contentBox">
			<view class="authBox">
				<view class="imgBox">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
					<image v-else src="/static/images/f.png" mode=""></image>
				</view>
				<view class="personInfo">
					<view class="nickText" @click="login">
						{{userInfo.nickname||'请登录'}}
					</view>
					<view class="nameText">

						{{userInfo.phone||''}}
					</view>
				</view>
			</view>
			<view class="cardBox">
				<view class="cardItem" @click="tourl('/pages/connect/index?type=1')">
					<image src="../../static/images/timestart.png" mode="widthFix"></image>
					<text>我对接的</text>
				</view>
				<view class="cardItem"  @click="tourl('/pages/connect/index?type=2')">
					<image src="../../static/images/tab2.png" mode="widthFix"></image>
					<text>对接我的</text>
				</view>
				<view class="cardItem" >
					<image src="../../static/images/fw.png" mode="widthFix"></image>
					<text>最近来访</text>
				</view>
				<view class="cardItem" @click="toorder()">
					<image src="/static/images/note.png" mode="widthFix"></image>
					<text>活动门票</text>
				</view>

			</view>
		</view>
		<!-- <view class="notice justify-between align-center">
			<image src="../../static/images/voice.png" mode="widthFix"></image>
			<view class="clamp1">
				您有一条新的对接需要处理
			</view>
			<view class="align-center" style="color: #0256FF;">
				立即对接
				<uv-icon name="arrow-right" color="#0256FF" size="15"></uv-icon>

			</view>
		</view> -->
		<view class="myorder bgWhite ">
				<view class="title">
					我的订单
				</view>
			<block v-if="haveOrder">
			<view class="orderitem posRelative mb15 justify-between align-start" @click="tourl('/pages/order/index')">
				<image :src="$domain.api+orderlist.img_url" mode=""></image>
				<view class="right">
					<view class=" clamp2 name">
							{{orderlist.title}}
					</view>
				<!-- 	<view class="align-center clamp1" style="margin: 16rpx 0 14rpx 0;">
						<image src="/static/images/dw.png" mode="widthFix"></image>
						
					</view> -->
					<view class="align-center clamp1 mt10">
						<image src="/static/images/time.png" mode="widthFix"></image>
						{{orderlist.create_time}}
					</view>
					
				</view>
			</view>
			</block>
			<uv-empty v-else></uv-empty>
		</view>
		<view class="shareCard ">
			<!-- <view class="shareItem" @click="tourl('/pages/idCard/index')">
				
					<view class="leftItem">
						<image src="/static/images/setting.png" mode="widthFix"></image>
						<text>设置</text>
					</view>
					<view class="">
						<uv-icon name="arrow-right" size="10" color="#1a1a1a"></uv-icon>
					</view>
				
				
			</view> -->
			<view class="shareItem" @click="tourl('/pages/report/index')">
				<view class="leftItem">
					<image src="/static/images/down.png" mode=""></image>
					<text>我的下载</text>
				</view>
				<view class="">
					<uv-icon name="arrow-right" size="10" color="#1a1a1a"></uv-icon>
				</view>
			</view>
			<view class="shareItem" @click="tourl('/pages/report/index')">
				<view class="leftItem">
					<image src="/static/images/book.png" mode=""></image>
					<text>我的报告</text>
				</view>
				<view class="">
					<uv-icon name="arrow-right" size="10" color="#1a1a1a"></uv-icon>
				</view>
			</view>
			<view class="shareItem" @click="tourl('/pages/collect/index')">
				<view class="leftItem">
					<image src="/static/images/user.png" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="">
					<uv-icon name="arrow-right" size="10" color="#1a1a1a"></uv-icon>
				</view>
			</view>
			
		</view>
		<view class="zw" style="height: 50rpx;">
			
		</view>
	</view>
</template>

<script>
	import actItem from '../../components/actItem.vue';
	export default {
		components:{
				actItem
		},
		data() {
			return {
				titleHeight: '',
				titleTops: '',
				datas:[{}],
				user_id: uni.getStorageSync('userId'),
				userInfo: {},
				orderlist:{},
				haveOrder:false
			}
		},
		onReady() {
			// #ifdef MP
			uni.getSystemInfo({
				success: (e) => {
					this.titleTops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.titleHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
				}
			})
			// #endif

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			tourl(url) {

				// if (!uni.getStorageSync('logintoken')) {
				// 	uni.reLaunch({
				// 		url: '/pages/login/login'
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: url
				})
			},

			toorder(){
				uni.navigateTo({
					url:'/pages/order/index'
				})
			},
			login() {
				if (!uni.getStorageSync('logintoken')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
			},
			async getUserInfo() {
				this.user_id = uni.getStorageSync('userId')
				this.haveOrder=false
				const {
					data
				} = await this.$api.getMyInfo({
					user_id: this.user_id
				})
				
				if (data) {
					this.userInfo = data
					uni.setStorageSync('userInfo', data)
					
					this.$api.orderlist({userId:data.id}).then(res=>{
						console.log(res)
							
						if(res.data&&res.data.length){
							this.haveOrder=true
							this.orderlist = res.data[0]
						}
					})
				}else{
					this.$utils.msg('登录过期，请重新登录')
						
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},700)
				}

			},
			//跳往常见问题页面
			shareGoDetail(pageUrl, name) {
				if (name == '我的订单') {
					uni.switchTab({
						url: pageUrl
					})
					return
				}

				uni.navigateTo({
					url: pageUrl
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mineBox {
		position: relative;
		background: #F8F8F8;
		min-height: 100vh;
		.titleText {
			position: relative;
			z-index: 22;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.contentBox {
			position: relative;
			z-index: 22;

			padding-top: 40rpx;

			.authBox {
				margin-left: 33rpx;
				// margin-top: 30rpx;
				display: flex;

				.imgBox {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}

				.personInfo {
					margin-left: 15rpx;

					.nickText {
						font-size: 32rpx;
						color: #1a1a1a;
						font-weight: 600;
						margin: 15rpx 0rpx 10rpx 0rpx;
					}

					.nameText {
						font-size: 30rpx;
						color: #8C8C8C;
						text {
							position: relative;
							top: -4rpx;
							margin: 0rpx 8rpx 0rpx;
						}
					}
				}
			}

			.cardBox {
				width: 711rpx;
				// height: 307rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 42rpx auto 24rpx;
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;

				.cardItem {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #1a1a1a;

					image {
						width: 72rpx;

						margin: 0 0 10rpx 0;
					}
				}
			}

		}
	}
		
	.notice{
		background: rgba(255,59,48,0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		height: 80rpx;
		margin: 24rpx;
		padding: 0 32rpx;
		image{
			width: 32rpx;
			margin-right: 16rpx;
		}
		.clamp1{
			color: #FF3B30;
			font-size: 30rpx;
			text-align: left;
			flex: 1;
		}
	}
	.myorder{
		border-radius: 24rpx;
		padding: 24rpx 28rpx;
		margin: 24rpx;
		.title{
			font-weight: 500;
			font-size: 34rpx;
			margin-bottom: 40rpx;
			color: #1A1A1A;
		}
	}
	.shareCard {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 21rpx auto;
		// padding: 40rpx 30rpx;
		position: relative;

		z-index: 99;

		.shareItem {
			display: flex;
			justify-content: space-between;
			height: 92rpx;
			align-items: center;
			padding: 0 32rpx;
			
			.leftItem {
				display: flex;
				align-items: center;

				font-weight: 500;
				font-size: 32rpx;
				color: #1A1A1A;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>


<style lang="scss" scoped>
	.orderitem {
		margin-bottom: 58rpx;
		font-size: 24rpx;
		color: #666666;
		image {
			width: 232rpx;
			height: 162rpx;
			margin-right: 26rpx;
			flex-shrink: 0;
		}
		.name {
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D ;
		}
		.right {
			width: 388rpx;
			image {
				width: 28rpx;
				margin: 0 4rpx 0 0;
			}
		}
	}
	
</style>